/* Result message styles (success/error) */
#result {
    font-size: 18px;
    margin-top: 20px;
}

.text-green-500 {
    color: #2ecc71;
}

.text-red-500 {
    color: #e74c3c;
}

.text-gray-500 {
    color: #7f8c8d;
}

/* Invalid field styles */
.is-invalid {
    border: 3px solid #e74c3c; /* Thicker red border for invalid fields */
    background-color: #f9d6d6; /* Light red background for visibility */
}

/* Valid field styles */
.is-valid {
    border: 3px solid #2ecc71; /* Thicker green border for valid fields */
    background-color: #d1f7d1; /* Light green background for visibility */
}

/* Remove the invalid/valid style when the input is focused */
.is-invalid:focus {
    border-color: #e74c3c; /* Keep red border on focus */
    outline: none; /* Remove default outline */
}

.is-valid:focus {
    border-color: #2ecc71; /* Keep green border on focus */
    outline: none; /* Remove default outline */
}